Technical review: Document scroll-triggered animations#43158
Technical review: Document scroll-triggered animations#43158chrisdavidmills wants to merge 51 commits intomdn:mainfrom
Conversation
chrisdavidmills
requested review from
hamishwillee
and removed request for
a team and
hamishwillee
chrisdavidmills
changed the title
Preview URLs (18 pages)
Flaws (79)Note! 6 documents with no flaws that don't need to be listed. 🎉 Found an unexpected or unresolvable flaw? Please report it here. URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
URL:
External URLs (2)URL:
URL:
(comment last updated: 2026-03-11 09:41:26) |
bramus
left a comment
bramus
left a comment
There was a problem hiding this comment.
I’m halfway through reviewing but already submitting my comments as I see there are some terms that are getting used in places where they should not be.
The themes I am seeing, where wrong names are use:
-
A trigger vs an animation becoming active / inactive: it is the trigger that becomes active / inactive. Animations will do something (play, pause, etc) in response to that trigger becoming active / inactive.
-
An element being a trigger vs a ViewTimeline being a trigger: it is the ViewTimeline that is the trigger, not the element itself.
I’m seeing these terms (trigger / animation / element) get mixed up through all files I reviewed.
Files I did not review, but most likely also have this mixup:
- files/en-us/web/css/reference/properties/timeline-trigger-active-range-end/index.md
- files/en-us/web/css/reference/properties/timeline-trigger-activation-range/index.md
- files/en-us/web/css/reference/properties/timeline-trigger-active-range-start/index.md
- files/en-us/web/css/reference/properties/timeline-trigger-active-range/index.md
- files/en-us/web/css/reference/properties/timeline-trigger-name/index.md
- files/en-us/web/css/reference/properties/timeline-trigger-source/index.md
- files/en-us/web/css/reference/properties/timeline-trigger/index.md
- files/en-us/web/css/reference/properties/trigger-scope/index.md
All other files I have reviewed, and left suggestions that you can immediately apply.
I can do a second review round later, but currently I’m overly busy with some other things.
| sidebar: cssref | ||
| --- | ||
|
|
||
| **CSS scroll-triggered animations** provide a declarative mechanism to trigger [CSS animations](/en-US/docs/Web/CSS/Guides/Animations) when an element enters a specific activation range inside a parent element's scrollport. |
There was a problem hiding this comment.
The “when an element enters a specific activation range inside a parent element's scrollport.” is not entirely correct, as your trigger-source can also be a ScrollTimeline instead of a ViewTimeline.
See https://codepen.io/bramus/pen/NPRNgBK/817c74a7415e6162d65208a408c8aab2 for a demo, where I use the following trigger:
timeline-trigger: --t scroll() 500px;
files/en-us/web/css/guides/animation_triggers/using_scroll-triggered_animations/index.md
Outdated
Show resolved
Hide resolved
|
|
||
| A very common UI pattern involves triggering animations on a web page when the user scrolls to a certain place in the content, for example to pull in additional UI elements or draw the user's attention to certain details. | ||
|
|
||
| The CSS scroll-triggered animations feature provides a declarative mechanism for creating such effects, providing an alternative to using JavaScript features such as the [Intersection Observer API](/en-US/docs/Web/API/Intersection_Observer_API). Depending on which JavaScript mechanism you are currently using, CSS scroll-triggered animations may also be simpler to implement and/or more performant. |
There was a problem hiding this comment.
Love this nuance at the end!
| - To stop this happening, we set an {{cssxref("animation-trigger")}} value on the animated element. This includes a {{cssxref("dashed-ident")}} name, `--t`, which is equal to the {{cssxref("timeline-trigger-name")}} of the element that will trigger the animation, and two {{cssxref("<animation-action>")}} values, which specify how the animation should behave when the trigger is activated (the animation plays forwards) and deactivated (the animation plays backwards). | ||
| > [!NOTE] | ||
| > `animation-trigger` is a reset-only sub-property of the `animation` shorthand property. You can't provide an `animation-trigger` value inside `animation`; instead `animation` resets `animation-trigger` to its initial value of `none`. For this reason, you should always set `animation-trigger` after a corresponding `animation` property in a declaration list. | ||
| - Next, we set the `timeline-trigger-name` property with a value of `--t` to specify that the `<figure>` element will be the element that will trigger the animation, as well as being the element that is animated. This means that the `<figure>` element will animate when it is scrolled to a certain position inside the scrollport. It is possible for the trigger element to be different to the element that is animated; see [Setting the trigger to a different element](#setting_the_trigger_to_a_different_element), later on. |
There was a problem hiding this comment.
“we set the timeline-trigger-name property with a value of --t to specify that the <figure> element will be the element that will trigger the animation” is not correct.
To specify that (the trigger attached to) the <figure> element will be the trigger for the animation, the animation-trigger property is used.
The timeline-trigger-name here only gives the created timeline-trigger a name, nothing more.
There was a problem hiding this comment.
I've tried updating it. This stuff really is complex to describe...whew!
files/en-us/web/css/guides/animation_triggers/using_scroll-triggered_animations/index.md
Outdated
Show resolved
Hide resolved
| > The `timeline-trigger-activation-range` property can also be set via the {{cssxref("timeline-trigger")}} shorthand property. | ||
|
|
||
| > [!NOTE] | ||
| > It is possible for the animated element and the trigger element to be the same element. |
There was a problem hiding this comment.
Same remark about the term “trigger element”
| } | ||
| ``` | ||
|
|
||
| In this case, the animation will be triggered by the trigger element with the `timeline-trigger-name` of `--my-trigger`. Its {{cssxref("animation-action")}} keywords — `play-forwards play-backwards` — specify that the animation should play forwards on activation, and backwards on deactivation. |
There was a problem hiding this comment.
Same remarks about:
- The animation is not getting triggered, but the trigger is. When that trigger becomes active (or inactive), the animation will do something.
- The use of the term “trigger element”
files/en-us/web/css/reference/properties/timeline-trigger-activation-range/index.md
Outdated
Show resolved
Hide resolved
|
|
||
| The animated {{htmlelement("div")}} element has an `animation` applied that rotates it. We set an {{cssxref("animation-trigger")}} value on it that references a trigger name of `--t`; we also specify two {{cssxref("animation-action")}} values — `play` and `pause` — which specify that the animation will play on activation, and pause on deactivation. | ||
|
|
||
| The trigger `<div>` element is defined as the animated `<div>`'s trigger using a {{cssxref("timeline-trigger-name")}} value of `--t`, which is equal to the identifier referenced in the animated `<div>`'s `animation-trigger` property value, associating the two together. It also includes a {{cssxref("timeline-trigger-source")}} value of [`view()`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline/view), which sets the element providing the view progress timeline as the nearest scrolling ancestor element. |
There was a problem hiding this comment.
Same remark as with previous occurrences of this sentence.
files/en-us/web/css/reference/properties/timeline-trigger-activation-range/index.md
Outdated
Show resolved
Hide resolved
…ggered_animations/index.md Co-authored-by: Bramus <bramus@bram.us>
…ggered_animations/index.md Co-authored-by: Bramus <bramus@bram.us>
…ggered_animations/index.md Co-authored-by: Bramus <bramus@bram.us>
…ggered_animations/index.md Co-authored-by: Bramus <bramus@bram.us>
…ggered_animations/index.md Co-authored-by: Bramus <bramus@bram.us>
…ggered_animations/index.md Co-authored-by: Bramus <bramus@bram.us>
…ggered_animations/index.md Co-authored-by: Bramus <bramus@bram.us>
…ggered_animations/index.md Co-authored-by: Bramus <bramus@bram.us>
…ggered_animations/index.md Co-authored-by: Bramus <bramus@bram.us>
…ggered_animations/index.md Co-authored-by: Bramus <bramus@bram.us>
…ex.md Co-authored-by: Bramus <bramus@bram.us>
…ex.md Co-authored-by: Bramus <bramus@bram.us>
…ex.md Co-authored-by: Bramus <bramus@bram.us>
…ex.md Co-authored-by: Bramus <bramus@bram.us>
…ex.md Co-authored-by: Bramus <bramus@bram.us>
…ex.md Co-authored-by: Bramus <bramus@bram.us>
…ex.md Co-authored-by: Bramus <bramus@bram.us>
…ex.md Co-authored-by: Bramus <bramus@bram.us>
…ex.md Co-authored-by: Bramus <bramus@bram.us>
…vation-range-end/index.md Co-authored-by: Bramus <bramus@bram.us>
Co-authored-by: Bramus <bramus@bram.us>
Co-authored-by: Bramus <bramus@bram.us>
…vation-range-start/index.md Co-authored-by: Bramus <bramus@bram.us>
…vation-range/index.md Co-authored-by: Bramus <bramus@bram.us>
…vation-range/index.md Co-authored-by: Bramus <bramus@bram.us>
…vation-range/index.md Co-authored-by: Bramus <bramus@bram.us>
…vation-range/index.md Co-authored-by: Bramus <bramus@bram.us>
…vation-range/index.md Co-authored-by: Bramus <bramus@bram.us>
…vation-range/index.md Co-authored-by: Bramus <bramus@bram.us>
3 participants
Description
Chrome 146 adds support for scroll-triggered animations; see https://chromestatus.com/feature/5181996801982464.
This PR adds documentation for this new feature, including:
animation-triggerproperty.<animation-action>type.trigger-scopeproperty.timeline-triggershorthand property.timeline-trigger-nameproperty.timeline-trigger-sourceproperty.timeline-trigger-activation-rangeshorthand property.timeline-trigger-activation-range-startproperty.timeline-trigger-activation-range-endproperty.timeline-trigger-active-rangeshorthand property.time-trigger-active-range-startproperty.time-trigger-active-range-endproperty.Motivation
Additional details
Related issues and pull requests